
var server_name;
var messages = [];
var panels = ['tests', 'picker'];

function init() { 
	build_menu();
	hide_all_panels();
	get_device_name(function(a) {
		document.getElementById('my_name').value = escape_html(unescape(a[0]));
	});
}


function hide_all_panels() {
	for (var i in panels) {
		hide_panel(panels[i]);
	}
}

function build_menu() {
	var m = document.getElementById('menu');
	var h = [];
	for (var i in panels) {
		h.push(
			'<a href="javascript:show_panel(\'' + 
			panels[i] + '\')">' + panels[i] + '</a>');
	}
	m.innerHTML = h.join(' | ');
}

function hide_panel(k) {
	var p = document.getElementById('panel_' + k);
	if (null == p) { return; }
	p.style.visibility = 'hidden';
}

function show_panel(k) {
	hide_all_panels();
	var p = document.getElementById('panel_' + k);
	if (null == p) { return; }
	p.style.visibility = 'visible';
}

function get_device_uuid(c) {
	if (null == c) {
		new_callback('device_uuid', (function(a) { 
				show("uuid: " + a[0]); 
			}));
	} else {
		new_callback('device_uuid', c);
	}
	queue_command(['device', 'uuid', 'device_uuid']);
}

function get_device_name(c) {
	if (null == c) {
		new_callback('device_name', (function(a) { 
				show("name: " + a[0]); 
			}));
	} else {
		new_callback('device_name', c);
	}
	queue_command(['device', 'name', 'device_name']);
}

function show_picture(s) {
	if (null == s) { return; }
	var e = document.getElementById('picture');
	e.innerHTML = '<center><img onload="resize_picture()" id="picture_img" src="' + s + '" /></center>';
}

function resize_picture() {
	var e = document.getElementById('picture_img');
	var m = 300 / ((e.width > e.height) ? e.width : e.height);
	var w = e.width * m;
	var h = e.height * m;
	e.width = w;
	e.height = h;
}

function show_playlist(a) {
	if (null == a || a.length < 2) {
		show("no music chosen");
	} else {
		show("chose " + (a.length - 1) + ' tracks');
		/*
		var e = document.getElementById('picture');
		var s = "<b>selected tracks:</b><br />"
		for (var i = 1; i < a.length; ++i) {
			s += "track " + i + " id: " + a[i] + '<br />';
		}
		e.innerHTML = s;
		*/
	}
}

function start_server() {
	var n = document.getElementById('my_name').value + "'s Server";
	queue_command(['server', n, 'uiwebframe']);
	server_name = n;
	show_chat_interface();
}

function start_client() {
	document.getElementById('picture').innerHTML = 'looking for servers';
	queue_command(['client', document.getElementById('my_name').value, 'uiwebframe']);
}

function found_servers(a) {
	var s = 'servers:<ol>';
	for (var i = 1; i < a.length; ++i) {
		s += '<li><a href="javascript:connect_to_server(\'' +
			a[i] + '\')">' + 
			escape_html(unescape(unescape(a[i]))) +
			'</a></li>';
	}
	s += '</ol>';
	var e = document.getElementById('picture');
	e.innerHTML = s;
}

function connect_to_server(s) {
	queue_command(['connect', s]);
	server_name = unescape(s);
}

function connected() {
	show_chat_interface();
}

function show_chat_interface() {
	var e = document.getElementById('picture');
	e.innerHTML = '<div style="background-color: blue; color: white; text-align: center; ">connected to <b>' +
		escape_html(server_name) + '</b></div>' +
		'<div id="chat">&nbsp;</div>' +
		'<form action="javascript:send_form()"><label for="message">say</label><input id="message" /><input type="submit" value="send"></form>';
	messages = [];
}

function send_form() {
	var e = document.getElementById('message');
	queue_command(['send', e.value])
	e.value = '';
}

function received_message(a) {
	var m = [];
	for (var i in a) {
		m.push(unescape(a[i]));
	}
	m[0] = '<span style="color: blue">' + escape_html(unescape(m[0])) + ':</span>';
	messages.push('<div>' + m[0] + escape_html(m[1]) + '</div>');
	while (messages.length > 5) {
		messages.shift();
	}
	document.getElementById('chat').innerHTML = messages.join('');

}

function disconnected() {
	show('disconnected');
	server_name = null;
	document.getElementById('picture').innerHTML = "disconnected";
}

function escape_html(s) {

	return s.split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;");

}

function test_picker() {
	new_picker('pick', (function (a) {
		show('new picker');
	}), 'data');
}
